<template>
    <div class="cooperative-enterprise-age">
        <echarts :data="optionData" height="150px"></echarts>
    </div>
</template>

<script>
import Echarts from '@components/my-components/echarts.vue';

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    computed: {
        xdata: function () {
            // return this.options.map((item,index,arr)=>{
            //     return item.bidmethod
            // })
            if (!!this.options) {
                let arr = this.options.map((item, index, arr) => {
                    return item.bidmethod;
                });
                return arr;
            }
        },
        ydata: function () {
            if (!!this.options) {
            return this.options.map((item, index, arr) => {
                return item.nums;
            });
             }
        },
        ydataTotal: function () {
            var s = 0;
            this.ydata.forEach(function (item) {
                s += item;
            });
            return s;
        },

        optionData() {
            const colors = ['#3b68ff', '#2ec75a', '#ff8f00', '#ff5454'];
            return {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {},
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '20%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false, // 不显示坐标轴刻度线
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false, //隐藏刻度值
                        },
                    },
                ],

                yAxis: [
                    {
                        type: 'category',
                        data: this.xdata,
                        splitNumber: 5,
                        inverse: true,
                        axisTick: {
                            show: false, // 不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                ],

                series: [
                    {
                        name: '数量及占比',
                        type: 'bar',
                        data: this.ydata,
                        color: colors[0],
                        tooltip: {
                            valueFormatter: (value) => {
                                return value + '个' + '(' + ((value / this.ydataTotal) * 100).toFixed(2) + '%' + ')';
                            },
                        },
                        barWidth: 30, //柱图宽度
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    textStyle: {
                                        //数值样式
                                        color: '#ffffff',
                                        fontSize: 14,
                                    },
                                    formatter: (params) => {
                                        return params.value + '个' + '(' + ((params.value / this.ydataTotal) * 100).toFixed(2) + '%' + ')';
                                    },
                                },
                            },
                        },
                    },
                ],
            };
        },
    },
    watch: {},
    methods: {
        int() {},
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
</style>
